/**
 * Copyright 2024 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
@use "sass:color";

// Main layout
$inspection-type-icon-size: 80px;
$selected-color: #283593;
$query-accent: #283593;

mat-dialog-content {
  overflow: hidden;
  height: 100%;
  max-width: 100vw;
  max-height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-columns: 100%;
}

mat-stepper {
  overflow: hidden;
  height: 100%;
}

mat-step {
  height: 100%;
}

:host::ng-deep {
  .mat-horizontal-stepper-wrapper {
    height: 100%;
  }

  .mat-horizontal-stepper-content.mat-horizontal-stepper-content-current {
    height: 100%;
  }

  .mat-horizontal-content-container {
    padding: 0px 24px 0px 24px;
    flex: 1;
  }
}

.allow-vertical-scroll {
  overflow-y: scroll;

  &::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: #3f51b5;
    box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
  }
}

.inspection-type-spacer {
  height: 30px;
}

mat-card.inspection-type {
  &:hover {
    background-color: color.adjust(white, $lightness: -5%);
    cursor: pointer;
  }

  margin-bottom: 10px;

  mat-card-content {
    display: flex;
    gap: 30px;

    .inspection-type-icon {
      max-width: $inspection-type-icon-size;

      img {
        width: $inspection-type-icon-size;
        height: $inspection-type-icon-size;
        display: block;
      }
    }

    .inspection-type-description {
      padding: 10px 0px;

      pre {
        white-space: pre-line;
      }
    }
  }
}

.features-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: start;
  gap: 10px;
  overflow-y: scroll;
  padding: 0px 10px 0px 0px;

  &::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: #3f51b5;
    box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
  }

  mat-card {
    cursor: pointer;
    border: 2.5px solid transparent;

    &:hover {
      background-color: color.adjust(white, $lightness: -5%);
    }

    &.selected {
      border: 2.5px solid $selected-color;

      .selected-icon {
        position: absolute;
        color: $selected-color;
        right: 5px;
        top: 5px;
      }
    }
  }

  .feature-item-spacer {
    grid-column-start: 1;
    grid-column-end: 2;
    flex: 1;
  }
}

.features-page {
  display: grid;
  grid-template-rows: 1fr 80px;
  height: 100%;
  overflow: hidden;
}

.features-footer {
  margin: 10px 0px 0px 0px;
  display: flex;
  justify-content: flex-end;
  align-items: center;

  .errmsg-no-selected-feature {
    color: redi;
    margin: 0px 20px;
  }
}

.loading-form-info {
  p {
    text-align: center;
  }

  justify-content: center;
  margin: 20px;
}

.parameter-view {
  height: 100%;
  overflow: hidden;
  display: grid;
  grid-template-areas: "parameter metadata" "footer footer";
  grid-template-rows: 1fr 100px;
  grid-template-columns: 1fr 1fr;

  .parameters-form-view {
    grid-area: parameter;
    margin: 0px 0px 0px -10px;
  }

  .parameters-metadata-view {
    grid-area: metadata;
  }

  .parameters-footer {
    grid-area: footer;
  }
}

.parameters-footer {
  margin: 10px 0px 0px 0px;
  display: flex;
  justify-content: flex-end;
  align-items: center;

  .errmsg-parameters-error {
    color: red;
    margin: 0px 20px;
  }
}

.progress-parameters-forms {
  margin: 50px 0px;
  .message {
    text-align: center;
  }
}

.query-section-card {
  margin: 0px 0px 5px 0px;
}

.query-card {
  margin: 0px 0px 5px 0px;
}

.query-section-query-pre {
  padding: 0px 0px 0px 10px;
  overflow-x: auto;
  border-left: 5px solid $query-accent;
}

.task-graph-pre {
  height: 150px;
  overflow: auto;
}

.step1-scroll-wrapper {
  height: 100%;
  overflow-y: scroll;

  &::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: #3f51b5;
    box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
  }
}
